content
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Ні |
Так |
Так |
Частк. |
Частк. |
Частк. |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2,
CSS2.1 |
|
Значення
за умовчанням |
Порожній
рядок |
|
Наслідує |
Ні |
|
Застосовується |
До
псевдоелементів before і after |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/generate.html#content |
Опис
Властивість
content дозволяє вставляти генерований зміст в текст веб-сторінки, яке первинне
в тексті відсутній. Застосовується спільно з псевдоелементами after і before,
вони відповідно вказують відображати новий вміст потім або до елементу, до
якого додаються.
Синтаксис
content:
рядок | attr(параметр) | open - quote | close - quote | no - open - quote | no
- close - quote | url | counter | normal | none | inherit
Значення
Рядок Текст, який додається на
веб-сторінку, рядок при цьому повинен братися в подвійні або одинарні лапки.
Допускається використовувати юникод для вставки спецсимволів. Спецсимволи HTML
які починаються з амперсанда (§ наприклад), відображатимуться як є, тобто
простим текстом (§, а не §).
attr(параметр) Повертає рядок, який є значенням параметра тега
вказаного в дужках. Наприклад, IMG: after {content: attr(href)} додасть після
зображення його адресу, тобто значення параметра href. Якщо вказаного параметра
немає, то повернеться порожній рядок.
open - quote Вставляє відкриваючу лапку, тип якої встановлюється за допомогою
стильової властивості quotes.
close – quote Вставляє закриваючу лапку.
no - open - quotes Відміняє додавання відкриваючої лапки.
no - close - quote Відміняє додавання закриваючої лапки.
url Абсолютна або відносна адреса
об'єкту, що вставляється. Якщо вказаний файл браузер не може відобразити, то
значення ігнорується.
counter Виводить значення лічильника, заданого властивістю
counter, - reset.
none Не додає ніякого змісту.
normal Задається як none для псевдоелементів before і after.
inherit Наслідує значення батька.
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http
://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>content</title>
<style type="text/css">
SPAN.tag {
color: navy; /* Колір тексту */
font - family: monospace; /* Моношириный
шрифт */
quotes: "<" ">";
/* Встановлюємо вид лапок */
}
SPAN.tag: before {
content: open - quote; /* Додаємо перед
текстом відкриваючу лапку */
}
SPAN.tag: after {
content: close - quote; /* Додаємо після
тексту закриваючу лапку */
}
</style>
</head>
<body>
<p>Тег <span
class="tag">DEL</span> використовується
для виділення тексту, який був видалений в
новій версії документу.</p>
</body>
</html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості content
Браузери
Firefox до
другої версії включно і Opera до версії 9.2 включно не підтримують значення
none. Safari до версії 3.1 не підтримує значення none і normal.
Браузер
Opera починаючи з сьомої версії і Safari 3, не вимагають використання
псевдоелементів before і after і допускають застосування content до усіх
елементів.